<template>
  <div class="app-container">
    <div class="app-container-inner">
      <div v-if="userStore.utype == 2">
        <el-row :gutter="20">
          <el-col :span="12"
            ><div class="pie">
              <el-tag
                style="margin-bottom: 2%; margin-left: 33%"
                type="success"
                effect="plain"
                size="large"
                >时间回溯机制</el-tag
              >
              <br />
              <el-date-picker
                v-model="begin"
                type="datetime"
                placeholder="选择回溯起始时间"
                format="YYYY/MM/DD hh:mm:ss"
                value-format="x" />
              <el-date-picker
                style="margin-left: 1%"
                v-model="end"
                type="datetime"
                placeholder="选择回溯结束时间"
                format="YYYY/MM/DD hh:mm:ss"
                value-format="x" />

              <el-button style="margin-left: 1%" :icon="Search" @click="searchData" />

              <div ref="main" style="width: 80%; height: 250px"></div></div
          ></el-col>
          <el-col :span="12">
            <el-select
              v-model="openWatermark"
              placeholder="Select"
              size="small"
              style="width: 100px; margin-left: 80%"
              @change="changeWatermark"
            >
              <el-option
                v-for="item in watermarkOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <div style="margin-top: 10%">
              <div v-for="goods in totalData" :key="goods.id" class="goodList">
                <GoodsItem :good="goods" />
              </div>
              <el-tag
                style="margin-left: 40%; margin-top: 3%"
                type="info"
                effect="plain"
                size="large"
                >本支部各部门党员人数</el-tag
              >
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24"
            ><div class="table">
              <el-card shadow="always">
                <template #header>
                  <div>
                    <span>党员发展各环节人数统计</span>
                  </div>
                </template>
                <div style="display: flex">
                  <el-card class="box-card">
                    <template #header>
                      <div class="card-header">
                        <p1 style="font-size: medium; font-weight: bold">申请入党阶段</p1>
                        <span>{{ outlookSum[0] }}</span>
                      </div>
                    </template>
                    <div class="status">
                      <div style="display: flex; margin-left: 10%">
                        <div class="bob1">
                          <span style="white-space: pre-line"
                            >教职工<br />&nbsp;{{ applySum[3] }}人</span
                          >
                        </div>
                        <div class="bob2" style="margin-left: 15%">
                          <span style="white-space: pre-line"
                            >本科生<br />&nbsp;{{ applySum[0] }}人</span
                          >
                        </div>
                      </div>

                      <div style="display: flex; margin-top: 2%; margin-left: 10%">
                        <div class="bob3">
                          <span style="white-space: pre-line"
                            >研究生<br />&nbsp;{{ applySum[1] }}人</span
                          >
                        </div>
                        <div class="bob4" style="margin-left: 15%">
                          <span style="white-space: pre-line"
                            >博士生<br />&nbsp;{{ applySum[2] }}人</span
                          >
                        </div>
                      </div>
                    </div>
                    <div v-for="f in first" :key="f.period" class="text">
                      <p1>{{ f.period }}</p1>
                      <span>{{ f.count }}</span>
                    </div>
                  </el-card>
                  <el-card class="box-card">
                    <template #header>
                      <div class="card-header">
                        <p1 style="font-size: medium; font-weight: bold">入党积极分子阶段</p1>
                        <span>{{ outlookSum[1] }}</span>
                      </div>
                    </template>
                    <div class="status">
                      <div style="display: flex; margin-left: 10%">
                        <div class="bob1">
                          <span style="white-space: pre-line"
                            >教职工<br />&nbsp;{{ jijiSum[3] }}人</span
                          >
                        </div>
                        <div class="bob2" style="margin-left: 15%">
                          <span style="white-space: pre-line"
                            >本科生<br />&nbsp;{{ jijiSum[0] }}人</span
                          >
                        </div>
                      </div>

                      <div style="display: flex; margin-top: 2%; margin-left: 10%">
                        <div class="bob3">
                          <span style="white-space: pre-line"
                            >研究生<br />&nbsp;{{ jijiSum[1] }}人</span
                          >
                        </div>
                        <div class="bob4" style="margin-left: 15%">
                          <span style="white-space: pre-line"
                            >博士生<br />&nbsp;{{ jijiSum[2] }}人</span
                          >
                        </div>
                      </div>
                    </div>
                    <div v-for="f in second" :key="f.period" class="text">
                      <p1>{{ f.period }}</p1>
                      <span>{{ f.count }}</span>
                    </div>
                  </el-card>
                  <el-card class="box-card">
                    <template #header>
                      <div class="card-header">
                        <p1 style="font-size: medium; font-weight: bold">入党发展对象阶段</p1>
                        <span>{{ outlookSum[2] }}</span>
                      </div>
                    </template>
                    <div class="status">
                      <div style="display: flex; margin-left: 10%">
                        <div class="bob1">
                          <span style="white-space: pre-line"
                            >教职工<br />&nbsp;{{ duixiangSum[3] }}人</span
                          >
                        </div>
                        <div class="bob2" style="margin-left: 15%">
                          <span style="white-space: pre-line"
                            >本科生<br />&nbsp;{{ duixiangSum[0] }}人</span
                          >
                        </div>
                      </div>

                      <div style="display: flex; margin-top: 2%; margin-left: 10%">
                        <div class="bob3">
                          <span style="white-space: pre-line"
                            >研究生<br />&nbsp;{{ duixiangSum[1] }}人</span
                          >
                        </div>
                        <div class="bob4" style="margin-left: 15%">
                          <span style="white-space: pre-line"
                            >博士生<br />&nbsp;{{ duixiangSum[2] }}人</span
                          >
                        </div>
                      </div>
                    </div>
                    <div v-for="f in third" :key="f.period" class="text">
                      <p1>{{ f.period }}</p1>
                      <span>{{ f.count }}</span>
                    </div>
                  </el-card>
                  <el-card class="box-card">
                    <template #header>
                      <div class="card-header">
                        <p1 style="font-size: medium; font-weight: bold">预备党员接收阶段</p1>
                        <span>{{ outlookSum[3] }}</span>
                      </div>
                    </template>
                    <div class="status">
                      <div style="display: flex; margin-left: 10%">
                        <div class="bob1">
                          <span style="white-space: pre-line"
                            >教职工<br />&nbsp;{{ jieshouSum[3] }}人</span
                          >
                        </div>
                        <div class="bob2" style="margin-left: 15%">
                          <span style="white-space: pre-line"
                            >本科生<br />&nbsp;{{ jieshouSum[0] }}人</span
                          >
                        </div>
                      </div>

                      <div style="display: flex; margin-top: 2%; margin-left: 10%">
                        <div class="bob3">
                          <span style="white-space: pre-line"
                            >研究生<br />&nbsp;{{ jieshouSum[1] }}人</span
                          >
                        </div>
                        <div class="bob4" style="margin-left: 15%">
                          <span style="white-space: pre-line"
                            >博士生<br />&nbsp;{{ jieshouSum[2] }}人</span
                          >
                        </div>
                      </div>
                    </div>
                    <div v-for="f in fourth" :key="f.period" class="text">
                      <p1>{{ f.period }}</p1>
                      <span>{{ f.count }}</span>
                    </div>
                  </el-card>
                  <el-card class="box-card">
                    <template #header>
                      <div class="card-header">
                        <p1 style="font-size: medium; font-weight: bold">预备党员考察阶段</p1>
                        <span>{{ outlookSum[4] }}</span>
                      </div>
                    </template>
                    <div class="status">
                      <div style="display: flex; margin-left: 10%">
                        <div class="bob1">
                          <span style="white-space: pre-line"
                            >教职工<br />&nbsp;{{ kaochaSum[3] }}人</span
                          >
                        </div>
                        <div class="bob2" style="margin-left: 15%">
                          <span style="white-space: pre-line"
                            >本科生<br />&nbsp;{{ kaochaSum[0] }}人</span
                          >
                        </div>
                      </div>

                      <div style="display: flex; margin-top: 2%; margin-left: 10%">
                        <div class="bob3">
                          <span style="white-space: pre-line"
                            >研究生<br />&nbsp;{{ kaochaSum[1] }}人</span
                          >
                        </div>
                        <div class="bob4" style="margin-left: 15%">
                          <span style="white-space: pre-line"
                            >博士生<br />&nbsp;{{ kaochaSum[2] }}人</span
                          >
                        </div>
                      </div>
                    </div>
                    <div v-for="f in fifth" :key="f.period" class="text">
                      <p1>{{ f.period }}</p1>
                      <span>{{ f.count }}</span>
                    </div>
                  </el-card>
                </div>
              </el-card></div
            ></el-col
          >
        </el-row>
      </div>
      <div v-else>
        <Error></Error>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted, computed } from 'vue'
  import { useUserStore } from '../../store/modules/user'
  import Error from '@/views/error/404.vue'
  import GoodsItem from './components/cardItem.vue'
  import * as echarts from 'echarts'
  import watermark from '@/utils/watermark.js'
  const main = ref()
  const begin = ref(1590975765000) //学院创建时间
  const end = ref(new Date().valueOf()) //当前时间，默认查找全部
  const userStore = useUserStore()
  import { Cloud } from 'laf-client-sdk'
  const APPID = 'su75ks' // Laf 应用 appid
  const cloud = new Cloud({
    baseUrl: `https://${APPID}.laf.run`,
    getAccessToken: () => userStore.token,
  })
  import { Search } from '@element-plus/icons-vue'
  const openWatermark = ref(false)
  const watermarkOptions = [
    {
      value: true,
      label: '开启水印',
    },
    {
      value: false,
      label: '关闭水印',
    },
  ]
  const changeWatermark = () => {
    console.log(openWatermark.value)
    if (openWatermark.value == true) {
      watermark.set(userStore.info.branch_name, userStore.num)
    } else {
      watermark.close()
    }
  }
  let total = 120
  //右上数据
  const totalData = ref([
    {
      id: 1,
      num: 40,
      desc: '本科生',
      status: 'primary',
      percentage: computed(() => {
        return (totalData.value[0].num / total) * 100
      }),
    },
    {
      id: 2,
      num: 40,
      desc: '硕士生',
      status: 'exception',
      percentage: computed(() => {
        return (totalData.value[1].num / total) * 100
      }),
    },
    {
      id: 3,
      num: 40,
      desc: '博士生',
      status: 'success',
      percentage: computed(() => {
        return (totalData.value[2].num / total) * 100
      }),
    },
    {
      id: 4,
      num: 20,
      desc: '教职生',
      status: 'warning',
      percentage: computed(() => {
        return (totalData.value[3].num / total) * 100
      }),
    },
  ])
  const first = ref([
    {
      period: '1.递交入党申请书',
      count: 10,
    },
    {
      period: '2.党组织派人谈话',
      count: 10,
    },
  ])
  const second = ref([
    {
      period: '3.团推优或党员推荐',
      count: 10,
    },
    {
      period: '4.党支部会议通过',
      count: 10,
    },
    {
      period: '5.上级党委备案',
      count: 10,
    },
    {
      period: '6.指定培养联系人',
      count: 10,
    },
    {
      period: '7.完成一年培养考察',
      count: 10,
    },
    {
      period: '8.发展对象考核推优',
      count: 10,
    },
  ])
  const third = ref([
    {
      period: '9.群众座谈会',
      count: 10,
    },
    {
      period: '10.确定发展对象',
      count: 10,
    },
    {
      period: '11.上级党委备案',
      count: 10,
    },
    {
      period: '12.确定入党介绍人',
      count: 10,
    },
    {
      period: '13.政治审查',
      count: 10,
    },
    {
      period: '14.党校集中培训',
      count: 10,
    },
  ])
  const fourth = ref([
    {
      period: '15.支部委员会审查',
      count: 10,
    },
    {
      period: '16.上级党委预审',
      count: 10,
    },
    {
      period: '17.填写入党志愿书',
      count: 10,
    },
    {
      period: '18.支部大会讨论',
      count: 10,
    },
    {
      period: '19.上级党委谈话',
      count: 10,
    },
    {
      period: '20.上级党委审批',
      count: 10,
    },
  ])
  const fifth = ref([
    {
      period: '21.编入党支部',
      count: 10,
    },
    {
      period: '22.入党宣誓',
      count: 10,
    },
    {
      period: '23.继续教育考察',
      count: 10,
    },
    {
      period: '24.提出转正申请',
      count: 10,
    },
    {
      period: '25.支部大会讨论',
      count: 10,
    },
    {
      period: '26.上级党委审批',
      count: 10,
    },
    {
      period: '27.材料归档',
      count: 10,
    },
  ])
  const outlookSum = ref([])
  const applySum = ref([])
  const jijiSum = ref([])
  const duixiangSum = ref([])
  const jieshouSum = ref([])
  const kaochaSum = ref([])
  const pieData = ref([])
  /*
  const getBranchData = async () => {
    const res = await cloud.invoke('getBranchData', { _id: userStore._id })
    if (res.code == 200) {
      //右上方数据
      totalData.value[0].num = res.jiaozhi
      totalData.value[1].num = res.benke
      totalData.value[2].num = res.shuoshi
      totalData.value[3].num = res.boshi
      total = res.jiaozhi + res.benke + res.shuoshi + res.boshi
      //下方顶部
      outlookSum.value.push(res.first)
      outlookSum.value.push(res.second)
      outlookSum.value.push(res.third)
      outlookSum.value.push(res.fourth)
      outlookSum.value.push(res.fifth)
      //下方中间
      applySum.value.push(res.benke1)
      applySum.value.push(res.shuoshi1)
      applySum.value.push(res.boshi1)
      applySum.value.push(res.jiaozhi1)
      jijiSum.value.push(res.benke2)
      jijiSum.value.push(res.shuoshi2)
      jijiSum.value.push(res.boshi2)
      jijiSum.value.push(res.jiaozhi2)
      duixiangSum.value.push(res.benke3)
      duixiangSum.value.push(res.shuoshi3)
      duixiangSum.value.push(res.boshi3)
      duixiangSum.value.push(res.jiaozhi3)
      jieshouSum.value.push(res.benke4)
      jieshouSum.value.push(res.shuoshi4)
      jieshouSum.value.push(res.boshi4)
      jieshouSum.value.push(res.jiaozhi4)
      kaochaSum.value.push(res.benke5)
      kaochaSum.value.push(res.shuoshi5)
      kaochaSum.value.push(res.boshi5)
      kaochaSum.value.push(res.jiaozhi5)
      first.value[0].count = res.one
      first.value[1].count = res.two
      second.value[0].count = res.three
      second.value[1].count = res.four
      second.value[2].count = res.five
      second.value[3].count = res.six
      second.value[4].count = res.seven
      second.value[5].count = res.eight
      third.value[0].count = res.night
      third.value[1].count = res.ten
      third.value[2].count = res.eleven
      third.value[3].count = res.twelve
      third.value[4].count = res.thirteen
      third.value[5].count = res.fourteen
      fourth.value[0].count = res.fifteen
      fourth.value[1].count = res.sixteen
      fourth.value[2].count = res.seventeen
      fourth.value[3].count = res.eighteen
      fourth.value[4].count = res.nineteen
      fourth.value[5].count = res.twenty
      fifth.value[0].count = res.twentyOne
      fifth.value[1].count = res.twentyTwo
      fifth.value[2].count = res.twentyThree
      fifth.value[3].count = res.twentyFour
      fifth.value[4].count = res.twentyFive
      fifth.value[5].count = res.twentySix
      fifth.value[6].count = res.twentySeven
    }
  }
  */
  const backTime = async () => {
    //利用begin 和 end取数据
    const res = await cloud.invoke('backTime', {
      begin: begin.value,
      end: end.value,
      branch_id: userStore._id,
    })
    pieData.value = []
    for (let i = 0; i < totalData.value.length; i++) {
      totalData.value[i].num = 0
    }
    total = 0 //所有totalData加起来
    outlookSum.value = []
    applySum.value = []
    jijiSum.value = []
    duixiangSum.value = []
    jieshouSum.value = []
    kaochaSum.value = []
    for (let i = 0; i < first.value.length; i++) {
      first.value[i].count = 0
    }
    for (let i = 0; i < second.value.length; i++) {
      second.value[i].count = 0
    }
    for (let i = 0; i < third.value.length; i++) {
      third.value[i].count = 0
    }
    for (let i = 0; i < fourth.value.length; i++) {
      fourth.value[i].count = 0
    }
    for (let i = 0; i < fifth.value.length; i++) {
      fifth.value[i].count = 0
    }
    if (res.code == 200) {
      let array = res.array
      //对于饼图的数据,从array中对列求和  也是下方顶部数据
      for (let i = 1; i < array.length; i++) {
        first.value[0].count += array[i][1]
        first.value[1].count += array[i][2]
        second.value[0].count += array[i][3]
        second.value[1].count += array[i][4]
        second.value[2].count += array[i][5]
        second.value[3].count += array[i][6]
        second.value[4].count += array[i][7]
        second.value[5].count += array[i][8]
        third.value[0].count += array[i][9]
        third.value[1].count += array[i][10]
        third.value[2].count += array[i][11]
        third.value[3].count += array[i][12]
        third.value[4].count += array[i][13]
        third.value[5].count += array[i][14]
        fourth.value[0].count += array[i][15]
        fourth.value[1].count += array[i][16]
        fourth.value[2].count += array[i][17]
        fourth.value[3].count += array[i][18]
        fourth.value[4].count += array[i][19]
        fourth.value[5].count += array[i][20]
        fifth.value[0].count += array[i][21]
        fifth.value[1].count += array[i][22]
        fifth.value[2].count += array[i][23]
        fifth.value[3].count += array[i][24]
        fifth.value[4].count += array[i][25]
        fifth.value[5].count += array[i][26]
        fifth.value[6].count += array[i][27]
      }

      //对于右上方数据,从array中行求和
      let total0 = 0 //array[1][i]
      let total1 = 0 //array[2][i]
      let total2 = 0 //array[3][i]
      let total3 = 0 //array[4][i]
      for (let i = 1; i < array[0].length; i++) {
        total0 += array[1][i]
        total1 += array[2][i]
        total2 += array[3][i]
        total3 += array[4][i]
      }
      totalData.value[0].num = total0
      totalData.value[1].num = total1
      totalData.value[2].num = total2
      totalData.value[3].num = total3
      total = total0 + total1 + total2 + total3
      //对于下方中间数据
      let apply0 = array[1][1] + array[1][2]
      let apply1 = array[2][1] + array[2][2]
      let apply2 = array[3][1] + array[3][2]
      let apply3 = array[4][1] + array[4][2]
      applySum.value.push(apply0)
      applySum.value.push(apply1)
      applySum.value.push(apply2)
      applySum.value.push(apply3)
      outlookSum.value.push(apply0 + apply1 + apply2 + apply3)
      pieData.value.push(outlookSum.value[0])
      let jiji1 = array[1][3] + array[1][4] + array[1][5] + array[1][6] + array[1][7] + array[1][8]
      let jiji2 = array[2][3] + array[2][4] + array[2][5] + array[2][6] + array[2][7] + array[2][8]
      let jiji3 = array[3][3] + array[3][4] + array[3][5] + array[3][6] + array[3][7] + array[3][8]
      let jiji4 = array[4][3] + array[4][4] + array[4][5] + array[4][6] + array[4][7] + array[4][8]
      jijiSum.value.push(jiji1)
      jijiSum.value.push(jiji2)
      jijiSum.value.push(jiji3)
      jijiSum.value.push(jiji4)
      outlookSum.value.push(jiji1 + jiji2 + jiji3 + jiji4)
      pieData.value.push(outlookSum.value[1])
      let duixiang1 =
        array[1][9] + array[1][10] + array[1][11] + array[1][12] + array[1][13] + array[1][14]
      let duixiang2 =
        array[2][9] + array[2][10] + array[2][11] + array[2][12] + array[2][13] + array[2][14]
      let duixiang3 =
        array[3][9] + array[3][10] + array[3][11] + array[3][12] + array[3][13] + array[3][14]
      let duixiang4 =
        array[4][9] + array[4][10] + array[4][11] + array[4][12] + array[4][13] + array[4][14]
      duixiangSum.value.push(duixiang1)
      duixiangSum.value.push(duixiang2)
      duixiangSum.value.push(duixiang3)
      duixiangSum.value.push(duixiang4)
      outlookSum.value.push(duixiang1 + duixiang2 + duixiang3 + duixiang4)
      pieData.value.push(outlookSum.value[2])
      let jieshou1 =
        array[1][15] + array[1][16] + array[1][17] + array[1][18] + array[1][19] + array[1][20]
      let jieshou2 =
        array[2][15] + array[2][16] + array[2][17] + array[2][18] + array[2][19] + array[2][20]
      let jieshou3 =
        array[3][15] + array[3][16] + array[3][17] + array[3][18] + array[3][19] + array[3][20]
      let jieshou4 =
        array[4][15] + array[4][16] + array[4][17] + array[4][18] + array[4][19] + array[4][20]
      jieshouSum.value.push(jieshou1)
      jieshouSum.value.push(jieshou2)
      jieshouSum.value.push(jieshou3)
      jieshouSum.value.push(jieshou4)
      outlookSum.value.push(jieshou1 + jieshou2 + jieshou3 + jieshou4)
      pieData.value.push(outlookSum.value[3])
      let kaocha1 =
        array[1][21] +
        array[1][22] +
        array[1][23] +
        array[1][24] +
        array[1][25] +
        array[1][26] +
        array[1][27]
      let kaocha2 =
        array[2][21] +
        array[2][22] +
        array[2][23] +
        array[2][24] +
        array[2][25] +
        array[2][26] +
        array[2][27]
      let kaocha3 =
        array[3][21] +
        array[3][22] +
        array[3][23] +
        array[3][24] +
        array[3][25] +
        array[3][26] +
        array[3][27]
      let kaocha4 =
        array[4][21] +
        array[4][22] +
        array[4][23] +
        array[4][24] +
        array[4][25] +
        array[4][26] +
        array[4][27]
      kaochaSum.value.push(kaocha1)
      kaochaSum.value.push(kaocha2)
      kaochaSum.value.push(kaocha3)
      kaochaSum.value.push(kaocha4)
      outlookSum.value.push(kaocha1 + kaocha2 + kaocha3 + kaocha4)
      pieData.value.push(outlookSum.value[4])
    }
  }

  function init() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(main.value)
    var datas = [
      [
        { name: '申请入党', value: pieData.value[0] },
        { name: '入党积极分子', value: pieData.value[1] },
        { name: '入党发展对象', value: pieData.value[2] },
        { name: '预备党员接收期', value: pieData.value[3] },
        { name: '预备党员考核期', value: pieData.value[4] },
      ],
    ]
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '各阶段党员人数',
        left: 'center',
        top: 'center',
        textStyle: {
          color: '#030e14',
          fontWeight: 'normal',
          fontSize: 15,
        },
      },
      series: datas.map(function (data) {
        return {
          type: 'pie',
          radius: [60, 90],
          height: '80%',
          left: 'center',
          top: 'center',
          width: 400,
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            alignTo: 'edge',
            formatter: '{name|{b}}\n{value|{c} 人}',
            minMargin: 5,
            edgeDistance: 10,
            lineHeight: 15,
            rich: {
              time: {
                fontSize: 15,
                color: '#999',
              },
            },
          },
          labelLine: {
            length: 5,
            length2: 0,
            maxSurfaceAngle: 70,
          },
          labelLayout: function (params: any) {
            const isLeft = params.labelRect.x < myChart.getWidth() / 2
            const points = params.labelLinePoints
            // Update the end point.
            points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width
            return {
              labelLinePoints: points,
            }
          },
          data: data,
        }
      }),
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }
  const searchData = () => {
    backTime()
    init()
  }
  const getAccount = async () => {
    const res = await cloud.invoke('curd_op', {
      collection: 'Account_Inf',
      operation: 'get',
      data: {
        where: {
          email: userStore.Email,
        },
      },
    })
    userStore._id = res.data[0]._id
    userStore.num = res.data[0].num
    userStore.utype = res.data[0].utype
    userStore.userInfo.create_date = res.data[0].create_date
    userStore.userInfo.name = res.data[0].name
    userStore.userInfo.phone = res.data[0].phone
    userStore.info.branch_name = res.data[0].info.branch_name
    userStore.info.college_id = res.data[0].info.college_id
    userStore.info.create_date = res.data[0].info.create_date
  }

  onUnmounted(() => {
    if (openWatermark.value == true) {
      watermark.close()
    }
  })

  onMounted(async () => {
    await getAccount()
    await backTime()
    await init()
  })
</script>

<style scoped lang="scss">
  .goodList {
    display: flex;
    float: left;
    flex-direction: row;
    margin-left: 1%;
    margin-top: 10%;
  }
  .pie {
    margin: 2%;
    .input-with-select {
      margin-top: 1%;
    }
  }
  .box-card {
    width: 25%;
    margin-right: 1%;

    .status {
      .bob1 {
        border: 2px solid #a163f7;
        color: #ffffff;
        border-radius: 10px;
        padding: 8px 8px;
        background-color: #a163f7;
        font-size: small;
        margin-left: 1%;
        max-width: 27%;
      }
      .bob2 {
        border: 2px solid #6f88fc;
        background-color: #6f88fc;
        border-radius: 10px;
        padding: 8px 8px;
        color: #ffffff;
        font-size: small;
        margin-left: 1%;
        max-width: 27%;
      }
      .bob3 {
        border: 2px solid #e9ad2d;
        background-color: #e9ad2d;
        border-radius: 10px;
        padding: 8px 8px;
        color: #ffffff;
        font-size: small;
        margin-left: 1%;
        max-width: 27%;
      }
      .bob4 {
        border: 2px solid #ff7582;
        border-radius: 10px;
        background-color: #ff7582;
        padding: 8px 8px;
        color: #ffffff;
        font-size: small;
        margin-left: 1%;
        max-width: 27%;
      }
      margin-bottom: 3%;
    }
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        border: 2px solid #faf7f7;
        border-radius: 10px;
        padding: 4px 4px;
        color: #fbf9f9;
        font-weight: bold;
        background-color: rgb(244, 4, 4);
      }
    }
    .text {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 2%;
      span {
        border: 2px solid #f8f6f6;
        border-radius: 7px;
        font-size: small;
        color: #f8f6f6;
        font-weight: bold;
        padding: 4px 4px;
        background-color: red;
      }
    }
  }
</style>
